import React from 'react'
import { Swiper } from 'react-vant'
import './index.css'

interface SwiperItem {
  id: number | string
  image: string
}

interface SwiperProps {
  items: SwiperItem[]
  autoplay?: boolean 
  loop?: boolean
  duration?: number
}

export default function CustomSwiper({ 
  items, 
  autoplay = true, 
  loop = true,
  duration = 3000 
}: SwiperProps) {
  const [activeIndex, setActiveIndex] = React.useState(0);

  const handleDotClick = (index: number) => {
    setActiveIndex(index);
  };

  return (
    <div className="user-swiper-container">
      <Swiper
        autoplay={autoplay ? duration : undefined}
        loop={loop}
        onChange={(index) => setActiveIndex(index)}
        indicator={(total, current) => (
          <div className="dots-container">
            {Array.from({ length: total }).map((_, index) => (
              <div 
                key={index}
                className={`dot ${index === current ? 'active' : ''}`}
                onClick={() => handleDotClick(index)}
              />
            ))}
          </div>
        )}
      >
        {items.map(item => (
          <Swiper.Item key={item.id}>
            <div className="swiper-item">
              <img src={item.image} alt="" />
            </div>
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  )
}
